<template>
	<view class="page">
		<view class="bg-user user-info ">
			<view class="user" @tap="login">
				<view class="cu-avatar xl round user-avatar" v-if="uInfo" :style="'background-image:url(' + uInfo.avatar + ')'">
					<text class="cuIcon-people" v-if="!uInfo.avatar"></text>
				</view>
				<view class="user-name" v-if="uInfo && uInfo.nickname">{{ uInfo.nickname }}</view>
				<navigator class="merchant_num" url="score" hover-class="none"></navigator>
			</view>
		</view>
	
		<view class="cu-card case" style="margin-top: 20px;z-index: 11;position: relative; width:100%">
			<view class="cu-item shadow">
				<view class="cu-list grid col-3">
					<view class="cu-item" @tap="goTo" data-url="../user/set">
						<view class="cuIcon-my text-mauve"></view>
						<text>个人设置</text>
					</view>
					<view class="cu-item" @tap="goTo" data-url="../user/pwd">
						<view class="cuIcon-lock text-blue"></view>
						<text>修改密码</text>
					</view>
					<view class="cu-item" @tap="goTo" data-url="../room/certificate">
						<view class="cuIcon-edit text-olive"></view>
						<text>证书列表</text>
					</view>
				</view>
			</view>
		</view>
	
		<view class="cu-card case">
			<view class="cu-item shadow">
				<view class="cu-list grid col-3">					
					<view class="cu-item" @tap="goTo" data-url="../room/index">
						<view class="cuIcon-list text-blue"></view>
						<text>考试列表</text>
					</view>
					<view class="cu-item" @tap="goTo" data-url="../room/grade">
						<view class="cuIcon-formfill text-yellow"></view>
						<text>考试成绩</text>
					</view>
					<!-- <view class="cu-item" @tap="goTo" data-url="../wrong/index">
						<view class="cuIcon-roundclose text-blue"></view>
						<text>错题本</text>
					</view> -->
					<!-- <view class="cu-item" @tap="goTo" data-url="../paper/grade">
						<view class="cuIcon-newshotfill text-cyan"></view>
						<text>考卷成绩</text>
					</view> -->
					<!-- <view class="cu-item" @tap="goTo" data-url="../user/set">
						<view class="cuIcon-my text-mauve"></view>
						<text>个人设置</text>
					</view> -->
					<!-- <view class="cu-item" @tap="goTo" data-url="../user/my-cate">
						<view class="cuIcon-favor text-green"></view>
						<text>常用题库</text>
					</view> -->
					<view class="cu-item" @tap="clickFollow()" v-show="showFollowBtn">
						<view class="cuIcon-weixin tn-color-green"></view>
						<text>我的证书</text>
					</view>
					<!-- #ifdef MP-WEIXIN -->
					<view class="cu-item">
						<button class="content" style="color: #333333;" open-type="contact">
							<view class="cuIcon-weixin text-green"></view>
							<text>联系客服</text>
						</button>
					</view>
					<!-- #endif -->
					<view class="cu-item" @tap="clearStorage">
						<view class="cuIcon-deletefill text-grey"></view>
						<text>退出登录</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 关注我们 -->
		<tui-modal :show="showFollow" @cancel="showFollow = false" :custom="true">
			<view class="tui-modal-custom">
				<image :src="followImage" mode="widthFix"></image>
				<view class="tui-modal-custom-text">
					
				</view>
				<tui-button height="72rpx" :size="28" type="primary" shape="circle" @click="showFollow = false">确定</tui-button>
			</view>
		</tui-modal>
	</view>
</template>

<script>
	import tuiModal from '@/exam/components/tui-modal/tui-modal.vue';
	import tuiButton from '@/exam/components/tui-button/tui-button.vue';
	
	export default {
		name:"kz-page-my-simple",
		// emits: ['login', 'goTo', 'clearStorage'],
		components: {
			tuiModal,
			tuiButton
		},
		props: {
			// 用户信息
			user: {
				type: Object,
				default: () => null
			},
		},
		watch: {
			/**
			 * 监听user
			 * @param value
			 */
			user(value) {
				console.log('watch user', value)
				this.uInfo = value
				
				var page = uni.getStorageSync('page')
				this.showFollowBtn = parseInt(page.page_my_follow_mp_btn) == 1
			},
		},
		data() {
			return {
				uInfo: null,
				// 关注公众号
				showFollowBtn: false,
				showFollow: false,
				followImage: '',
			};
		},
		onLoad() {
			// 页面加载时自动提交报名
			this.submitSignup();
		},
		methods: {
			login() {
				this.$emit('login')
			},
			goTo(e) {
				let page = e.currentTarget.dataset.url
				this.$emit('goTo', page)
			},
			clearStorage() {				
				uni.removeStorageSync('userInfo')
				this.$store.commit('save_userInfo',{})
				uni.reLaunch({
					url: '/pages/member/login'
				})
			},
			clickFollow() {
				var page = uni.getStorageSync('page')
				if (page.page_my_follow_mp_click == 'image') {
					this.followImage = this.appInfo.api_host + page.follow_mp_image
					this.showFollow = true
				} else if (page.page_my_follow_mp_click == 'article') {
					this.goTo('/pages/webview/webview?url=' + page.follow_mp_article_url)
				} 
				
			},
			submitSignup() {
				// 提交报名的逻辑
				console.log('Submitting signup...');
				// 这里添加你的提交逻辑
			},
		}
	}
</script>

<style>
	.page {
		height: 100vh;
	}
	
	.bg-user {
		background: #5677fc;
		color: #fff;
	}
	
	.user-info {
		width: 100%;
		height: 150px;
		position: relative;
		border-radius: 0 0 10% 10%;
	}
	
	.user {
		width: 100%;
		height: 80px;
	}
	
	.avatar {
		width: 80px;
		height: 80px;
		border: 1px solid #fff;
		margin-left: 5%;
		float: left;
	}
	
	.avatar image {
		width: 100%;
		height: 100%;
		display: block;
	}
	
	.user-avatar {
		margin-left: 50rpx;
		margin-top: 50rpx;
	}
	
	.user-name {
		font-size: 18px;
		/* width: calc(100% - 120px); */
		width:30%;
		margin-right:50px;
		margin-top:50px;
		text-align: right;
		white-space: nowrap; /* Prevent text wrapping */
		overflow: hidden; /* Hide overflowing text */
		text-overflow: ellipsis; /* Add "..." when text is too long */
		float: right;
		color: #fff;
	}
	
	button.contact::after {
		border: none;
	}
	
	button.content {
		background-color: #fff;
	
		padding-left: 0;
	
		padding-right: 0;
	
		line-height: inherit;
		border-radius: 0;
	}
</style>

<style scoped>
.title {
    width: 100%; /* 确保标题占满父容器 */
    overflow: hidden; /* 隐藏超出部分 */
    white-space: nowrap; /* 不换行 */
    text-overflow: ellipsis; /* 超出部分用省略号表示 */
}

.title-text {
    display: inline-block; /* 使 text 能够应用 text-overflow */
    max-width: calc(18ch); /* 限制最大宽度为 18 个中文字符 */
}
</style>
